<!DOCTYPE HTML>
<html>
   <head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>知果汇</title>
		<link href="_CSS_/bootstrap.min.css" rel="stylesheet">
		<link href="_CSS_/simple-line-icons.css" rel="stylesheet">
		<link href="_CSS_/font-awesome.min.css" rel="stylesheet">
		<link href="_CSS_/jasny-bootstrap.min.css" rel="stylesheet">
		<link rel="stylesheet" href="_CSS_/nanoscroller.css">
		<link href="_CSS_/style.css" rel="stylesheet">
		<link rel="stylesheet" type="text/css" href="_CSS_/jquery-ui.css">
		<!--[if lt IE 9]>
		  <script src="_JS_/html5shiv.min.js"></script>
		  <script src="_JS_/respond.min.js"></script>
		<![endif]-->
		<style type="text/css">
		    body{background-color: #ffffff;}
			.row{margin-left: 0px;margin-right: 0px;}
			.radio-box{display:inline-block;width: 64px;}
			.formControls{padding-right:50px; position: relative;}
			.textarea {height: 100px;resize: none;font-size: 14px;padding: 4px;}
            .textarea-numberbar {position: absolute;right: 70px;bottom: 5px;z-index: 1;margin-bottom: 0;}
			.upload-btn {width: 290px;height: 200px;margin: 0;border: 1px solid #a9a9a9;}
			.upload-btn img{
				display: block;
				width: 79px;
				height: 72px;
				margin-top: 60px;
				margin-left: 109px;

			}
			.upload-btn input{
				position: absolute;
				top: 0;

				margin: 0;
				width: 290px;
				height: 200px;
				border: none;
				opacity: 0;
				filter: alpha(opacity=0);
				cursor: pointer
			}
			.upload-img{width:290px;height: 200px;}
			.upload-img p {
				width: 290px;
				margin-top: -50px;
				text-align: center;
			}
			.img-info img{
				width: 290px;
				height: 200px;
			}
			.file-panel {
				position: absolute;
				display: none;
				width: 290px;
				height: 200px;
				top: 0;
				overflow: hidden;
				z-index: 300;
			}
			.cancel {
				width: 290px;
				height: 200px;
				background-color: rgba( 0, 0, 0, 0.5 );
			}
			.table-btn,.table-btn:hover,.table-btn:focus{color: #ffffff;}
		</style>
    </head>
	<body>
	<article class="page-container">
		<form class="form form-horizontal" id="form-admin-add">
			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-3">视频集名称：</label>
				<div class="formControls col-xs-8 col-sm-9">
					<input type="text" class="input-text" value="" placeholder="视频集名称" id="videolistName" name="videolistName">
				</div>
			</div>
			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-3">视频类别：</label>
				<div class="formControls col-xs-8 col-sm-9"> <span class="select-box" style="width:150px;">
					<select class="select" name="videoRole" size="1" id="sort">
						<!--<option value="0">全部</option>-->
						<option value="1">专利评议</option>
						<option value="2">专利维权</option>
						<option value="3">专利托管</option>
						<option value="4">专利代理</option>
						<option value="5">政策应用</option>
						<option value="6">设计开发</option>
						<option value="7">其他</option>
					</select>
					</span> </div>
			</div>
			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-3">上传图片：</label>
				<div class="formControls col-xs-8 col-sm-9">
					<div class="upload-img">
						<div class="img-info">
							<img src=""/>
							<div class="file-panel">
								<div title="删除图片" class="cancel">
									<a class="btn table-btn" style="font-size:18px;margin-top:170px;margin-left:250px;" title="删除图片" href="javascript:;">
										<i class="fa fa-trash-o"></i>
									</a>
								</div>
							</div>
						</div>
						<div class="upload-btn" style="display: none;">
							<img src="_IMG_/upload.jpg">
							<input type="file" name="img" id="file_img" onchange="previewImage(this,1)" accept="image/gif, image/jpeg, image/png" />
						</div>
						<p style="display: none;">上传图片大小不超过2M</p>
					</div>
				</div>
			</div>
			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-3">备注：</label>
				<div class="formControls col-xs-8 col-sm-9">
					<textarea name="remark" cols="" rows="" class="textarea"  placeholder="说点什么...100个字符以内" dragonfly="true" onKeyUp="textarealength(this,100)"></textarea>
					<p class="textarea-numberbar"><em class="textarea-length">0</em>/100</p>
				</div>
			</div>
			<div class="row cl">
				<div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
					<input class="btn btn-primary radius" type="submit" value="&nbsp;&nbsp;提交&nbsp;&nbsp;">
					<input class="btn btn-cancel radius" style="color: #ffffff;background-color: #a0a0a0;" type="button" value="&nbsp;&nbsp;取消&nbsp;&nbsp;">
				</div>
			</div>
		</form>
	</article>

    <script src="_JS_/jquery.min.js"></script>
    <script src="_JS_/bootstrap.min.js"></script>
    <script src="_JS_/jasny-bootstrap.min.js"></script>
	<script src="_JS_/jquery.base64.js"></script>
	<script src="_JS_/jquery.cookie.js"></script>
    <script src="_JS_/jquery.slimscroll.min.js"></script>
    <script src="_JS_/jquery.nanoscroller.min.js"></script>
    <script src="_JS_/metismenu.min.js"></script>
    <script src="_JS_/float-custom.js"></script>
    <script type="text/javascript" src="_JS_/layer/layer.js"></script>
    <script type="text/javascript" src="_JS_/jquery.validation/1.14.0/jquery.validate.min.js"></script>
    <script type="text/javascript" src="_JS_/jquery.validation/1.14.0/validate-methods.js"></script>
    <script type="text/javascript" src="_JS_/jquery.validation/1.14.0/messages_zh.min.js"></script>
	<script type="text/javascript" src="_JS_/jquery.form.js"></script>
	<script type="text/javascript">
	/*textarea 字数限制*/
	function textarealength(obj,maxlength){
		var v = $(obj).val();
		var l = v.length;
		if( l > maxlength){
			v = v.substring(0,maxlength);
			$(obj).val(v);
		}
		$(obj).parent().find(".textarea-length").text(v.length);
	}
	$("#page-title").html("视频管理");
	var url=window.location.href;
	list_id = url.split("#")[1];
	$(function(){
		$.ajax({
			type: "get",
			url: "{:url('api/video/management_detail')}",
			dataType: 'jsonp',
			jsonp:'callback',
			data:{'id':list_id},
			success: function (msg) {
				if(msg.code == 200){
					//编辑器准备好之后加载内容
					$('#videolistName').val(msg.data.title);
					$('#sort').val(msg.data.type);
					$('.img-info').find('img').attr("src","_SRC_/Cover/"+msg.data.pic);
					$('.textarea').val(msg.data.remark);
					$('.img-info').hover(function(){
						$(this).find(".file-panel").show();
					},function(){
						$(this).find(".file-panel").hide();

					});
					$(".cancel").on("click",function(){
						$(this).parents('.upload-img').find(".upload-btn").show();
						$(this).parents('.upload-img').find("p").show();
						$(this).parents(".img-info").remove();

					});
				}
				if(msg.code==1000){
					layer.msg('获取信息不成功!',{icon:1,time:2000});
				}
			}
		});
		var userinfo=$.cookie('username');
		if(userinfo!=null){
			var user_login= $.base64.decode(userinfo).split(",");
			var uid=user_login[1];
		}else{
			parent.window.location.href="{:url('admin/login/index')}";
		}
		$("#form-admin-add").validate({
			rules:{
				videolistName:{
					required:true,
					minlength:4,
					maxlength:16
				},
				videoRole:{
					required:true,
				},

			},
			onkeyup:false,
			focusCleanup:true,
			success:"valid",
			submitHandler:function(form){
				//$(form).ajaxSubmit();
				$("form").ajaxSubmit({
					type: "post",
					url: "{:url('api/video/management_edit')}",
					dataType:"json",
					data:{'uid':uid,'list_id':list_id},
					success: function (msg) {
						layer.closeAll();
						if(msg.code==200){
							layer.msg(msg.message);
							parent.window.location.reload();
						}
						if(msg.code==1000){
							layer.msg('修改失败!',{icon:1,time:1000});
						}
					}
				});

			}
		});
	});
	$(".btn-cancel").click(function(){
		var index = parent.layer.getFrameIndex(window.name);
		parent.layer.close(index);
	});
	/* 图片预览*/
	function previewImage(obj,num){
		var filepath=$(obj).val();
		fileObj = document.getElementById('file_img');
		value = window.URL.createObjectURL(fileObj.files[0]);
		file_size = obj.files[0].size;
		size = file_size / 1024;
		if (size > 1024*2) {
			$('#file_img').val("");
			layer.alert('上传图片不得大于2MB', {
				closeBtn: 0
			});
		} else {
			$(obj).parents(".upload-img").prepend('<div class="img-info"><img src="'+value+'"/><div class="file-panel"><div title="删除图片" class="cancel"><a class="btn table-btn" style="font-size:18px;margin-top:170px;margin-left:250px;" title="删除图片" href="javascript:;"><i class="fa fa-trash-o"></i></a></div></div></div>');
			$(obj).parent(".upload-btn").hide();
			$(obj).parents(".upload-img").children('p').hide();

			$('.img-info').hover(function(){
				$(this).find(".file-panel").show();
			},function(){
				$(this).find(".file-panel").hide();

			});
			$(".cancel").on("click",function(){
				$('#file'+num).val("");
				$(this).parents('.upload-img').find(".upload-btn").show();
				$(this).parents('.upload-img').find(".upload-img p").show();
				$(this).parents(".img-info").remove();

			});
		}
	}
	</script> 
</body>
</html>